<template>
  <div style="overflow: auto; height: 300px; width: 300px">
    <div class="list" v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
      <div v-for="item in visibleList" :key="item.id" class="item">
        {{ item.name }}
      </div>
      <div v-if="loading">加载中...</div>
      <div v-if="noMore">到底了...</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
const allList = ref([
  { id: 1, name: 1 },
  { id: 2, name: 2 },
  { id: 3, name: 3 },
  { id: 4, name: 4 },
  { id: 5, name: 5 },
  { id: 6, name: 6 },
  { id: 7, name: 7 },
  { id: 8, name: 8 },
  { id: 9, name: 9 },
  { id: 10, name: 10 },
  { id: 11, name: 11 },
  { id: 12, name: 12 },
  { id: 13, name: 13 },
])
const pageSize = ref(5)
const page = ref(1)
const visibleList = ref<typeof allList.value>([])
const loading = ref(false)
const disabled = ref(false)
const noMore = ref(false)
const load = () => {
  if ((page.value - 1) * pageSize.value >= allList.value.length) {
    noMore.value = true
    return
  }
  loading.value = true
  const startIndex = (page.value - 1) * pageSize.value
  const endIndex = page.value * pageSize.value
  const visibleData = allList.value.slice(startIndex, endIndex)
  visibleList.value = [...visibleList.value, ...visibleData]
  page.value++
  loading.value = false
}
onMounted(() => {
  load()
})
</script>
<style scoped lang="scss">
.list {
  padding: 0;
  margin: 0;
}
.item {
  height: 80px;
  background: var(--el-color-primary-light-9);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
